<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>诚信扣分记录</title>
    <script src="js/jquery-3.7.0.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/vue.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            margin: 0;
            padding: 20px;
        }

        .main {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .news {
            text-align: center;
        }

        .bgc, .title {
            background-color: #007bff;
            color: white;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 5px;
        }

        .search {
            margin-bottom: 20px;
        }

        .showNews {
            text-align: left;
        }

        .newsInfo {
            margin-bottom: 20px;
            padding: 10px;
            background-color: #f9f9f9;
            border-radius: 5px;
        }

        .date {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .newsTitle a, .newsClub a, .newsNr a {
            text-decoration: none;
            color: #007bff;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="news">
        <div class="bgc">
            诚信管理中心
        </div>
        <div class="title">
            扣分记录
        </div>
        <div class="showNews">
            <div class="newsInfo" v-for="(item, index) in scores" :key="index">
                <hr>
                <div class="date">
                    <div class="year">{{ formatDate(item.date).year }}</div>
                    <div class="month">{{ formatDate(item.date).month }}</div>
                    <div class="day">{{ formatDate(item.date).day }}</div>
                </div>
                <div class="newsTitle">
                    <p>{{ item.value }}</p>
                </div>
                <div class="newsNr">
                    <p>扣分数: {{ item.score }}</p>
                </div>
                <hr>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        function LoginVerify() {
            console.log("进行登陆验证");
            $.ajax({
                url: "loginVerify",
                type: "get",
                dataType: "json",
                success: function (response) {
                    if (response.state == 300) {
                        let a = alert(response.message);
                        window.location.href = "login.html";
                    }
                }
            });
        }

        // 调用登录验证函数
        LoginVerify();

        let app = new Vue({
            el: ".main",
            data: {
                scores: []
            },
            methods: {
                formatDate(dateString) {
                    const date = new Date(dateString);
                    return {
                        year: date.getFullYear(),
                        month: date.getMonth() + 1, // 月份从0开始，所以加1
                        day: date.getDate()
                    };
                }
            }
        });

        // 获取诚信扣分记录
        $.ajax({
            url: "scoreValue", // 确保这是正确的API URL
            type: "get",
            dataType: "json",
            success: function (response) {
                console.log(response);
                app.scores = response;
            }
        });
    });
</script>
</body>
</html>